<template>
	<view>
		<view>
			<uni-popup :ref="refs" background-color="#fff" :mask-click="false" type="dialog">
				<uni-title type="h2" :title="title" color="#2490ff" align="center"></uni-title>
				
				<block v-if="type == 'create'">
					<uni-section title="歌单封面" type="line">
						<view class="popup-content">
							<view class="pic_box">
								<view class="pic_box_item" v-for="(item, index) in pics" :key="index">
									<image :src="item.url"></image>
									<checkbox-group @change="checkboxChange">
										<checkbox :value="item.value" :checked="item.checked" :disabled="item.checked" />
									</checkbox-group>
								</view>
							</view>
						</view>
					</uni-section>
					<uni-section title="歌单名称" type="line">
						<uni-easyinput trim="all" v-model="create.title" placeholder="请输入歌单名称"></uni-easyinput>
					</uni-section>
					<uni-section title="歌单作者" type="line" padding="0">
						<uni-easyinput trim="all" v-model="create.author" placeholder="请输入歌单作者"></uni-easyinput>
					</uni-section>
				</block>
				
				<block v-if="type == 'manage'">
					<uni-section title="全部歌单" type="line">
						<block v-if="manageList.length">
							<view class="popup-content">
								<view class="item_box_content border" :class="item.isDel ? 'is_del' : ''" v-for="(item, index) in manageList" :key="index" @tap="checked(index, item)">
									<image :src="item.coverImgUrl" mode=""></image>
									<view class="item_box_content_info">
										<uni-title :title="item.title" color="#000"></uni-title>
										<uni-title :title="item.author" color="#444"></uni-title>
									</view>
									<view class="check" v-show="item.isDel"><uni-icons type="checkmarkempty" color="#ff0000" size="26"></uni-icons></view>
								</view>
							</view>
						</block>
						<block v-else>
							<view style="text-align: center;">暂无歌单</view>
						</block>
					</uni-section>
				</block>
				
				<block v-if="type == 'regain'">
					<view class="">
						<uni-section title="恢复歌单" type="line">
							<view class="popup-content">
								<block v-if="regains.length">
									<view class="item_box_content border" :class="item.isDel ? '' : 'is_del'" v-for="(item, index) in regains" :key="index" @tap="checked(index, item)">
										<image :src="item.coverImgUrl" mode=""></image>
										<view class="item_box_content_info">
											<uni-title :title="item.title" color="#000"></uni-title>
											<uni-title :title="item.author" color="#444"></uni-title>
										</view>
										<view class="check" v-show="!item.isDel"><uni-icons type="checkmarkempty" color="#ff0000" size="26"></uni-icons></view>
									</view>
								</block>
								<block v-else>
									<view style="text-align: center;">暂无歌单</view>
								</block>
							</view>
						</uni-section>
					</view>
				</block>
				
				<view class="btn">
					<view @tap="close">关闭</view>
					<view @tap="define" v-if="type == 'create'">确定</view>
					<view @tap="Delete" v-if="type == 'manage'">删除</view>
					<view @tap="recovery" v-if="type == 'regain'">恢复</view>
				</view>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import util from '@/utils/util.js';
	export default {
		name:"u-song-sheet",
		
		props: {			
			refs: ''
		},
		
		data() {
			return {
				type: '',
				title: '',
				create: {
					id: 0,
					coverImgUrl: '../../static/image/vertical_bg1.png',
					title: '',
					author: '',
					createTime: '',
					isDel: false
				},
				pics: [
					{'url': '../../static/image/vertical_bg1.png', 'value': 'item1', 'checked': true},
					{'url': '../../static/image/vertical_bg2.png', 'value': 'item2', 'checked': false},
					{'url': '../../static/image/vertical_bg3.png', 'value': 'item3', 'checked': false},
					{'url': '../../static/image/vertical_bg4.png', 'value': 'item4', 'checked': false},
					{'url': '../../static/image/vertical_bg5.png', 'value': 'item5', 'checked': false},
					{'url': '../../static/image/vertical_bg6.png', 'value': 'item6', 'checked': false},
				],
				manageList: [],
				regains: [],
				checkNum: [],
				recoveryLen: 0
			};
		},
		
		mounted() {
			let refs = this.$refs[this.refs];
			let _this = this;
			_this.close();
			setTimeout(() => {
				uni.$on('songSheetBox', function(data){
						refs.open('center');
						_this.title = data['title'];
						_this.type = data['type'];
						
						if(data['type'] == 'manage')
							_this.manage();
						else if(data['type'] == 'regain')
							_this.regain();
				});
			},500);
		},
		
		methods: {
			checkboxChange(e){
				let value = e.detail.value[0];
				
				for(var i = 0; i < this.pics.length; i++){
					if(value == this.pics[i].value){
						this.pics[i].checked = true;
						this.create.coverImgUrl = this.pics[i].url;
					}else{
						this.pics[i].checked = false;
					}
				}
			},
			
			define(){
				let data = [];
				let time = Date.parse(new Date());
				this.create.id = time / 1000;
				this.create.createTime = time;
				let songSheet = util.getStorageSync('songSheet');
				if(songSheet){
					data = JSON.parse(songSheet);
					data.unshift(this.create);
					util.setStorageSync('songSheet', JSON.stringify(data));
				}else{
					data.unshift(this.create);
					util.setStorageSync('songSheet', JSON.stringify(data));
				}
				
				uni.showToast({ title: '创建成功', duration: 2000 });
				
				this.pics.forEach((val, key)=>{
					if(key == 0){
						this.pics[key].checked = true;
					}else{
						this.pics[key].checked = false;
					}
				});
				
				this.create = {
					id: 0,
					coverImgUrl: '../../static/image/vertical_bg1.png',
					title: '',
					author: '',
					createTime: '',
					isDel: false
				},
			
				this.$emit('update');
				this.close();
			},
			
			close() {
				this.$refs[this.refs].close();
			},
			
			manage(){
				this.manageList = [];
				let manageList = JSON.parse(util.getStorageSync('songSheet'));
				manageList.forEach((val, key) => {
					if(!val.isDel){
						this.manageList.push(val);
					}
				});
			},
			
			checked(index, item){
				if (item.isDel == true) {
					this.$set(item, 'isDel', false);
					let removeIndex = this.checkNum.indexOf(item.id);
					this.checkNum.splice(removeIndex, 1);
				} else {
					this.$set(item, 'isDel', true);
					this.checkNum.push(item.id);
				}
			},
			
			Delete(){
				if(!this.checkNum.length){
					uni.showToast({ title: '请选中后再删除', icon: 'none', duration: 3000 });
					this.close();
					return false;
				}
				
				let list = JSON.parse(util.getStorageSync('songSheet'));
				this.checkNum.forEach((val, key)=>{
					list.some(v =>{
						if(v.id === val){
							v.isDel = true;
							return false;
						}
					})
				});
				
				util.setStorageSync('songSheet', JSON.stringify(list));
				
				uni.showToast({ title: '删除成功', duration: 2000 });
				
				this.checkNum = [];
				this.$emit('update');
				
				this.close();
				
				/*
					听歌最怕应景，触景最怕生情
					蓝调爵士，浓情老酒馆
					富士山下钟无艳，耿耿于怀罗生门
					我走路带风，可以这么形容
					生命中有太多遗憾，岁月里有太多伤感
				*/
			},
			
			regain(){
				let regainArr = [];
				let regain = JSON.parse(util.getStorageSync('songSheet'));
				regain.forEach((val, key) =>{
					if(val.isDel){
						regainArr.push(val);
						this.checkNum.push(val.id)
					}
				});
				
				this.recoveryLen = this.checkNum.length;
				this.regains = regainArr;
			},
			
			recovery(){
				if(this.checkNum.length == this.recoveryLen){
					uni.showToast({ title: '请选中后再恢复', icon: 'none', duration: 3000 });
					this.close();
					return false;
				}
				
				let songSheet = JSON.parse(util.getStorageSync('songSheet'));
				this.regains.forEach((val, key) => {
					songSheet.some((v, k) => {
						if(val.id == v.id){
							v.isDel = val.isDel;
							return false;
						}
					});
				})
				
				util.setStorageSync('songSheet', JSON.stringify(songSheet));
				
				uni.showToast({ title: '恢复成功', duration: 2000 });
				
				this.checkNum = [];
				this.regains = [];
				
				this.$emit('update');
				this.close();
			},
		}
	}
</script>

<style scoped>	
	/deep/.uni-popup{
		z-index: 999;
	}
	
	.pic_box{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	
	.pic_box_item{
		width: 100px;
		height: 100px;
		padding-bottom: 10px;
		position: relative;
	}
	
	.pic_box_item image{
		width: 100%;
		height: 100%;
		
	}
	
	.pic_box_item checkbox-group,
	.item_box_content .check{
		position: absolute;
		top: 0;
		right: 0;
	}
	
	/deep/.uni-dialog-title{
		display: none;
	}
	
	/deep/.uni-section-header{
		/* padding-bottom: 0 !important; */
	}
	
	.btn{
		display: flex;
		font-size: 14px;
		text-align: center;
		height: 40px;
		line-height: 40px;
		font-size: 14px;
		margin-top: 10px;
	}
	
	.btn view:first-child {
		border-right-color: #f5f5f5;
		border-right-style: solid;
		border-right-width: 1px;
	}
	
	.btn view{
		width: 50%;
		border-top-color: #f5f5f5;
		border-top-style: solid;
		border-top-width: 1px;
	}
	
	.item_box_content{
		display: flex;
		align-items: center;
		flex: 1;
		margin-bottom: 20px;
	}
	
	.item_box_content image{
		width: 60px;
		height: 60px;
		border-radius: 8px;
		margin-right: 6px;
	}
	
	.item_box_content .item_box_content_info{
		display: flex;
		flex-direction: column;
	}
	
	/deep/.uni-title__base{
		font-size: 13px;
	}
	
	.border{
		border: 1px solid #ccc;
		border-radius: 6px;
		padding: 10px;
		margin-bottom: 10px;
		position: relative;
	}
	
	.manageCheckbox{
		position: absolute;
		top: 50%;
		right: 0;
		transform: translate(0, -12px);
	}
	
	.popup-content .is_del{
		border: 1px solid #ff0000;
	}
</style>